<template>
  <div>
    <template v-if="structData.url !== undefined && structData.url != ''">
      <!-- <component
                      :is="structData.url"
                      :formDate="formData"
                    /> -->
    </template>
    <template else>
      <template
        v-if="structData.attrs !== undefined && structData.attrs.length > 0"
      >
        <el-row
          :gutter="10"
          v-for="(attr, index) in structData.attrs"
          :key="index"
        >
          <template
            v-if="attr.dataStruct !== undefined && attr.dataStruct.length > 0"
          >
            <el-col :span="24" class="line">
              <template v-if="attr.dataStruct[0].structType == '4'">
                <!-- 数据分组(弱布局) -->
                <PPMDataWeak
                  :folded="$attrs.folded"
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                  :id="attr.dataStruct[0].structId"
                />
              </template>
              <template v-else-if="attr.dataStruct[0].structType == '5'">
                <!-- 数据分组(强布局) -->
                <PPMDataHeavy
                  :folded="$attrs.folded"
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                  :id="attr.dataStruct[0].structId"
                />
              </template>
              <template v-else-if="attr.dataStruct[0].structType == '2'">
                <!-- 用做展开收起的数据分组 -->
                <PPMData
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                  :id="attr.dataStruct[0].structId"
                  @ctrlfold="ctrlfold"
                />
              </template>
              <template v-else-if="attr.dataStruct[0].structType == '8'">
                <!-- 数据分组(面板)的组件 -->
                <PPMDataPanel
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                  :id="attr.dataStruct[0].structId"
                />
              </template>
            </el-col>
          </template>
          <template
            v-if="attr.tabStruct !== undefined && attr.tabStruct.length > 0"
          >
            <el-col :span="24" class="line">
              <template v-if="attr.tabStruct[0].structType == '6'">
                <PPMTabHori
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                ></PPMTabHori>
              </template>
              <template v-else-if="attr.tabStruct[0].structType == '7'">
                <PPMTabVerti
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                ></PPMTabVerti>
              </template>
              <template v-else>
                <PPMTab
                  :structData="attr"
                  :formData="formData"
                  :ruleData="ruleData"
                ></PPMTab>
              </template>
            </el-col>
          </template>
          <template
            v-if="attr.components !== undefined && attr.components.length > 0"
          >
            <el-col
              v-for="(component, componentIndex) in attr.components"
              :span="component.col.span"
              class="line"
              v-show="showDiv(component.isDisplay)"
              v-bind:data-ctrl="component.isDisplay"
              :key="componentIndex"
            >
              <template v-if="component.attrTypeCd !== '20'">
                <template v-for="(value, key) in formData">
                  <template
                    v-if="
                      key ===
                      component.pageTempStructId + '-' + component.attrId
                    "
                  >
                    <!-- 校验入口: -->
                    <el-form-item
                      :key="key"
                      :label="component.attrName"
                      :id="key"
                      :prop="key + '.value'"
                      v-show="formData[key].isshow"
                      :required="
                        formData[key].required.split(',').includes('empty')
                      "
                    >
                      <!-- 普通文本框  -->
                      <template v-if="component.attrTypeCd === '1'">
                        <el-input
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          :readonly="component.readonly ? true : false"
                          :disabled="
                            component.disabled || formData[key].disabled == true
                              ? true
                              : false
                          "
                          @change="GetEvent(component, 'change', $event)"
                          @clear="GetEvent(component, 'clear', $event)"
                          @focus="GetEvent(component, 'focus', $event)"
                          @blur="GetEvent(component, 'blur', $event)"
                          @input="GetEvent(component, 'input', $event)"
                        ></el-input>
                      </template>
                      <!-- 2:select 普通下拉 -->
                      <template v-if="component.attrTypeCd === '2'">
                        <dyn-select
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          @input="validfield(key + '.value')"
                          :productId="structData.productId"
                          :attrId="component.attrId"
                          :component="component"
                          :formData="formData"
                          :formKey="key"
                          @change="GetEvent(component, 'change', $event)"
                          @visible-change="
                            GetEvent(component, 'visible-change', $event)
                          "
                          @remove-tag="
                            GetEvent(component, 'remove-tag', $event)
                          "
                          @clear="GetEvent(component, 'clear', $event)"
                          @focus="GetEvent(component, 'focus', $event)"
                          @blur="GetEvent(component, 'blur', $event)"
                        ></dyn-select>
                      </template>
                      <!--43,快捷下拉  -->
                      <template v-if="component.attrTypeCd === '43'">
                        <sct-select
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          @input="validfield(key + '.value')"
                          :productId="structData.productId"
                          :attrId="component.attrId"
                          :component="component"
                          :formData="formData"
                          :formKey="key"
                          @change="GetEvent(component, 'change', $event)"
                          @visible-change="
                            GetEvent(component, 'visible-change', $event)
                          "
                          @remove-tag="
                            GetEvent(component, 'remove-tag', $event)
                          "
                          @clear="GetEvent(component, 'clear', $event)"
                          @focus="GetEvent(component, 'focus', $event)"
                          @blur="GetEvent(component, 'blur', $event)"
                        ></sct-select>
                      </template>
                      <!-- 12:横向按钮组单选(自适应) -->
                      <template v-if="component.attrTypeCd === '41'">
                        <dyn-btngroup
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          @input="validfield(key + '.value')"
                          :productId="structData.productId"
                          :attrId="component.attrId"
                          :component="component"
                          :formData="formData"
                          :formKey="key"
                          @change="GetEvent(component, 'change', $event)"
                        ></dyn-btngroup>
                      </template>
                      <!-- 3:textarea 文本域 -->
                      <template v-if="component.attrTypeCd === '3'">
                        <el-input
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          type="textarea"
                          :readonly="component.readonly ? true : false"
                          :disabled="
                            component.disabled || formData[key].disabled == true
                              ? true
                              : false
                          "
                          @change="GetEvent(component, 'change', $event)"
                          @clear="GetEvent(component, 'clear', $event)"
                          @focus="GetEvent(component, 'focus', $event)"
                          @blur="GetEvent(component, 'blur', $event)"
                          @input="GetEvent(component, 'input', $event)"
                        ></el-input>
                      </template>
                      <!-- 4:password 密码-->
                      <template v-if="component.attrTypeCd === '4'">
                        <el-input
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          type="password"
                          :readonly="component.readonly ? true : false"
                          :disabled="
                            component.disabled || formData[key].disabled == true
                              ? true
                              : false
                          "
                          @change="GetEvent(component, 'change', $event)"
                          @clear="GetEvent(component, 'clear', $event)"
                          @focus="GetEvent(component, 'focus', $event)"
                          @blur="GetEvent(component, 'blur', $event)"
                          @input="GetEvent(component, 'input', $event)"
                        ></el-input>
                      </template>
                      <!-- 5:radio 单选-->
                      <template v-if="component.attrTypeCd === '5'">
                        <dyn-radio
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          @input="validfield(key + '.value')"
                          :productId="structData.productId"
                          :attrId="component.attrId"
                          :component="component"
                          :disableds="formData[key].disabled"
                          @change="GetEvent(component, 'change', $event)"
                        ></dyn-radio>
                      </template>
                      <!-- 6:横向按钮组复选-->
                      <template v-if="component.attrTypeCd === '6'">
                        <dyn-btncheckbox
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          @input="validfield(key + '.value')"
                          :productId="structData.productId"
                          :attrId="component.attrId"
                          :component="component"
                          :formData="formData"
                          :formKey="key"
                          @change="GetEvent(component, 'change', $event)"
                        ></dyn-btncheckbox>
                      </template>
                      <!-- 40:日期控件 -->
                      <template v-if="component.attrTypeCd === '40'">
                        <el-date-picker
                          :style="component.property"
                          :readonly="component.readonly ? true : false"
                          :disabled="
                            component.disabled || formData[key].disabled == true
                              ? true
                              : false
                          "
                          v-model="formData[key].value"
                          v-show="formData[key].isshow"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          :picker-options="StartDate(key)"
                          @change="GetEvent(component, 'change', $event)"
                          @focus="GetEvent(component, 'focus', $event)"
                          @blur="GetEvent(component, 'blur', $event)"
                        ></el-date-picker>
                      </template>
                      <!-- 8:hidden 隐藏域-->
                      <template v-if="component.attrTypeCd === '8'">
                        <el-input
                          v-model="formData[key].value"
                          type="hidden"
                        ></el-input>
                      </template>
                      <!-- 10:暂无用处-->
                      <template v-if="component.attrTypeCd === '10'">
                        <!-- <enlarge-grid v-model="formData[key].value" @input="validfield(key + '.value')" :data="value" :sqlCode="component.actionValue"></enlarge-grid> -->
                      </template>
                      <!-- 42:选项弹框(tree/list) -->
                      <template v-if="component.attrTypeCd === '42'">
                        <input-grid
                          :component="component"
                          :formData="formData"
                          :formKey="key"
                          v-model="formData[key].text"
                          v-show="formData[key].isshow"
                          @input="validfield(key + '.value')"
                          :sqlCode="component.actionValue"
                          @getrow="
                            (val) => {
                              formData[key].value = val;
                              validfield(key + '.value');
                            }
                          "
                          @getInputGridValue="getInputGridValue"
                        />
                      </template>
                      <!-- 每个元素后面都可支持tips -->
                      <template v-if="component.tips">
                        <el-tooltip
                          effect="light"
                          :content="component.tips"
                          placement="right-start"
                        >
                          <i class="el-icon-question" />
                        </el-tooltip>
                      </template>
                    </el-form-item>
                  </template>
                </template>
              </template>
              <template v-else>
                <!-- 7:label -->
                <template v-if="component.attrTypeCd === '7'"></template>
                <!-- 10:button -->
                <template v-if="component.attrTypeCd === '10'">
                  <!-- <component :is="component.actionValue" :formData="formData" /> -->
                </template>
                <!-- 20:plugin 有的插件需要传递参数,使用|把组件名称和参数分割-->
                <template v-if="component.attrTypeCd === '20'">
                  <template>
                    <component
                      :is="pluginSubPath(component.actionValue)"
                      :config="dialogInputConfig(component.actionValue)"
                      :formData="formData"
                      :ruleData="ruleData"
                      :actionValue="component.actionValue"
                      :component="component"
                      @getPluginValue="getPluginValue"
                    />
                  </template>
                </template>

                <!-- 30:lable -->
                <template v-if="component.attrTypeCd === '30'">
                  {{ component.attrName }}
                  <label
                    :class="component.props['class']"
                    :style="component.props['style']"
                    >{{ component.defaultValue }}</label
                  >
                </template>
              </template>
            </el-col>
          </template>
        </el-row>
      </template>
    </template>
  </div>
</template>
<script>
import ValidateMap from "../utils/validate-map";
import { mapState, mapGetters } from "vuex";
export default {
  name: "ppmForm",
  props: {
    formData: {
      type: Object,
    },
    ruleData: {
      type: Object,
      default: () => {
        return {
          ppm: {},
          rules: {},
        };
      },
    },
    structData: {
      type: Object,
    },
    spanNum: {
      type: Number,
      default: 24,
    },
    isHide: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState("orders", ["orderPosInfo"]),
    ...mapState("user", ["user"]),
  },
  data() {
    return {
      sugar: {
        width: "400px",
      },
    };
  },
  filters: {
    capitalize: function (value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
  components: {
    PPMTab: () => import("./ppmTab"),
    PPMData: () => import("./ppmData"),
  },
  created() {
    this.load();
  },
  methods: {
    validfield(prop) {
      let ppm = this.ruleData["ppm"];
      ppm.$refs.ppmRef.validateField(prop);
    },
    load() {
      //验证规则匹配
      if (this.structData.attrs != null && this.structData.attrs.length > 0) {
        this.structData.attrs.forEach((attr) => {
          if (attr.components != undefined && attr.components.length > 0) {
            attr.components.forEach((component) => {
              //formdata的验证规则跟pagemoda同步，20210816 add by cjj
              // this.formData[
              //   component.pageTempStructId + "-" + component.attrId
              // ].required = component.validRule;
              //202010816
              if (
                component.validRule != null &&
                component.validRule.length != 0
              ) {
                let validKeys = component.validRule.split(",");
                let propKey =
                  component.pageTempStructId +
                  "-" +
                  component.attrId +
                  ".value";
                let rules = [];
                this.ruleData["rules"][propKey] = rules;
                for (let i = 0; i < validKeys.length; i++) {
                  rules.push(
                    ValidateMap[validKeys[i]](
                      component.attrName,
                      component.attrTypeCd == "5" ||
                        component.attrTypeCd == "41"
                        ? "change"
                        : "blur"
                    )
                  );
                }
              }
            });
          }
        });
      }
    },
    pluginSubPath(path) {
      const arr = path.split("|");
      return arr[0];
    },

    /**
     * 获取校验规则
     */
    getRulers(validRule, attrName) {
      const rules = [];
      let strs = validRule.split(",");
      for (let i = 0; i < strs.length; i++) {
        if (strs[i]) {
          rules.push(ValidateMap[strs[i]](attrName));
        }
      }
      return rules;
    },

    /**
     * 动态设置验证规则 add by cjj 20210816
     * 传值为对象：
     * attrName: "订单要求完成日期", //属性名
     * formkey: "10461405-100010082", //属性唯一id
     * reqName: "empty,email", //校验名。例：empty为非空校验，email为邮件校验，多条验证以，分割开。具填参照公共规则validate-map.js
     * reqStatus: true, //校验状态，true为增加，false为删除
     * attrType: "button", //表单属性，radio,button,checkbox验证为change事件；input,select为blur事件
     */
    SetRequired(obj) {
      console.log("公共规则校验");
      if (this.formData[obj.formkey]) {
        let rules = this.ruleData.rules;
        let ruleKey = obj.formkey + ".value";
        let reqNameArr = obj.reqName.split(",");
        let required = this.formData[obj.formkey].required
          ? this.formData[obj.formkey].required.split(",")
          : [];
        if (obj.reqStatus) {
          //添加规则
          for (let i = 0; i < reqNameArr.length; i++) {
            if (rules[ruleKey]) {
              let thisRules = rules[ruleKey];
              let ruleNames = [];
              for (let x = 0; x < thisRules.length; x++) {
                ruleNames.push(thisRules[x].name);
              }
              if (!ruleNames.includes(reqNameArr[i])) {
                //当表单属性不存在这条规则
                rules[ruleKey].push(
                  ValidateMap[reqNameArr[i]](
                    obj.attrName,
                    obj.style
                      ? obj.attrType == "button"
                        ? "change"
                        : "blur"
                      : "blur"
                  )
                );
                //formdata required值更新，页面必填样式控制
                if (!required.includes(reqNameArr[i])) {
                  required.push(reqNameArr[i]);
                  this.formData[obj.formkey].required = required.toString();
                }
              } else {
                //当表单属性存在这条规则
                return;
              }
            } else {
              //当表单属性不存在这条规则
              rules[ruleKey] = [];
              rules[ruleKey].push(
                ValidateMap[reqNameArr[i]](
                  obj.attrName,
                  obj.attrType
                    ? obj.attrType == "button"
                      ? "change"
                      : "blur"
                    : "blur"
                )
              );
              //formdata required值更新，页面必填样式控制
              if (!required.includes(reqNameArr[i])) {
                required.push(reqNameArr[i]);
                this.formData[obj.formkey].required = required.toString();
              } else {
                return;
              }
            }
          }
        } else {
          //删除规则
          for (let i = 0; i < reqNameArr.length; i++) {
            if (rules[ruleKey]) {
              let thisRules = rules[ruleKey];
              let ruleNames = [];
              for (let x = 0; x < thisRules.length; x++) {
                ruleNames.push(thisRules[x].name);
              }
              if (!ruleNames.includes(reqNameArr[i])) {
                //当表单属性不存在这条规则
                return;
              } else {
                //当表单属性存在这条规则,则删除该规则
                rules[ruleKey] = thisRules.filter((item) => {
                  return item.name != reqNameArr[i];
                });
                //formdata required值更新，页面必填样式控制
                if (!required.includes(reqNameArr[i])) {
                  return;
                } else {
                  required = required.filter((item) => {
                    return item != reqNameArr[i];
                  });
                  this.formData[obj.formkey].required = required.toString();
                }
              }
            } else {
              return;
            }
          }
        }
      }
    },

    /**
     * 获取自定义的样式配置
     */
    getStyles(component) {
      let { property } = { ...component };
      debugger;
      let styles = {};
      if (property && typeof property == "object") {
        styles = property;
      }
      return styles;
    },

    /**
     * 事件转换 add by cjj
     */
    GetEvent(component, event, $event) {
      if (component.action) {
        if (component.action[0] == event) {
          return this.Newstring(component.action[1], $event);
        }
      }
    },

    Newstring(str, $event) {
      let strArr = str.split("|");

      return this[strArr[0]](strArr[1] ? strArr[1] : $event);
    },
    ctrlfold() {},

    /**
     * 初始化组件隐藏
     */

    showDiv(isDisplay) {
      if (isDisplay == "1") {
        return false;
      } else {
        return true;
      }
    },
    //插件上预留的更业务逻辑相关的两个方法
    dialogInputConfig() {},
    getPluginValue() {},
    getInputGridValue() {},

    StartDate() {
      //时间事件
    },
  },
};
</script>

<style scoped>
/* .el-date-editor.el-input,
.el-date-editor.el-input__inner {
	width: 190px;
} */
</style>
